/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/

@use "@/styles/desktop/configured-variables/template" as variables;
@use "@/styles/desktop/template/layout/mixins" as layoutsMixins;

$card-spacer-content: 16px;

.demo-space-x {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: -$card-spacer-content;

    & > * {
        margin-block-start: $card-spacer-content;
        margin-inline-end: $card-spacer-content;
    }
}

.demo-space-y {
    & > * {
        margin-block-end: $card-spacer-content;

        &:last-child {
            margin-block-end: 0;
        }
    }
}

// 👉 Card match height
.match-height.v-row {
    .v-card {
        block-size: 100%;
    }
}

// 👉 Whitespace
.whitespace-no-wrap {
    white-space: nowrap;
}

// 👉 Colors

/*
  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
  Moreover, we also use this class in some places

  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3

  ℹ️ We also need !important to get correct color in badge icon
*/
.text-white {
    color: #fff !important;
}

.text-white-variant {
    color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
}

.text-link {
    &:not(:hover) {
        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
    }
}

.bg-var-theme-background {
    background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
}

.bg-global-primary {
    background-color: rgb(var(--v-theme-primary)) !important;
    color: rgb(var(--v-theme-on-primary)) !important;
}

// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
@each $color-name in variables.$theme-colors-name {
    .bg-light-#{$color-name} {
        background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
    }
}

// 👉 clamp text
.clamp-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.custom-badge {
    .v-badge__badge {
        border-radius: 6px !important;
        block-size: 12px !important;
        inline-size: 12px !important;
    }
}

.leading-normal {
    line-height: normal !important;
}

// 👉 for rtl only
.flip-in-rtl {
    @include layoutsMixins.rtl {
        transform: scaleX(-1);
    }
}

// 👉 Carousel
.carousel-delimiter-top-end {
    .v-carousel__controls {
        justify-content: end;
        block-size: 40px;
        inset-block-start: 0;
        padding-inline: 1rem;

        .v-btn--icon.v-btn--density-default {
            block-size: calc(var(--v-btn-height) + -10px);
            color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
            inline-size: calc(var(--v-btn-height) + -8px);

            &.v-btn--active {
                color: #fff;
            }

            .v-btn__overlay {
                opacity: 0;
            }

            .v-ripple__container {
                display: none;
            }

            .v-btn__content {
                .v-icon {
                    block-size: 8px !important;
                    font-size: 8px !important;
                    inline-size: 8px !important;
                }
            }
        }
    }

    @each $color-name in variables.$theme-colors-name {

        &.dots-active-#{$color-name} {
            .v-carousel__controls {
                .v-btn--active {
                    color: rgb(var(--v-theme-#{$color-name})) !important;
                }
            }
        }
    }
}

.v-timeline-item {
    .app-timeline-title {
        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3125rem;
    }

    .app-timeline-meta {
        color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
        font-size: 12px;
        line-height: 0.875rem;
    }

    .app-timeline-text {
        color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
        font-size: 14px;
        line-height: 1.25rem;
    }

    .timeline-chip {
        border-radius: 6px;
        background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
        padding-block: 5px;
        padding-inline: 10px;
    }
}
